<template>
    <div class="wrapper">
        <transition name="login">
            <login class="login" v-show="loginShow"></login>
        </transition>
        <div class="video-container">
            <video autoplay loop class="fillWidth" :style="fixStyle">
                <source src="./night.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
</template>
<script>
import Login from "@/components/login/login";
export default {
  data() {
    return {
      videoPlay: false,
      fixStyle: {},
      videoWidth: 0,
      videoHeight: 0,
      loginShow: true,
      signInShow: false
    };
  },
  methods: {
    _initVedio() {
      const windowWidth =
        document.documentElement.clientWidth || document.body.clientWidth;
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const windowAspectRatio = windowHeight / windowWidth;
      var videoHeight = 0;
      var videoWidth = 0;
      if (windowAspectRatio < 0.5625) {
        videoWidth = windowWidth;
        videoHeight = videoWidth * 0.5625;
        this.fixStyle = {
          height: windowWidth * 0.5625 + "px",
          width: windowWidth + "px"
          // "margin-bottom": (windowHeight - videoHeight) / 2 + "px",
          // "margin-left": "initial"
        };
      } else {
        videoHeight = windowHeight;
        videoWidth = videoHeight / 0.5625;
        this.fixStyle = {
          height: windowHeight + "px",
          width: windowHeight / 0.5625 + "px"
          // "margin-left": (windowWidth - videoWidth) / 2 + "px",
          // "margin-bottom": "initial"
        };
      }
    },
    _changeVedio() {
      window.onresize = () => {
        const windowWidth =
          document.documentElement.clientWidth || document.body.clientWidth;
        const windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        const windowAspectRatio = windowHeight / windowWidth;
        var videoHeight = 0;
        var videoWidth = 0;
        if (windowAspectRatio < 0.5625) {
          videoWidth = windowWidth;
          videoHeight = videoWidth * 0.5625;
          this.fixStyle = {
            height: windowWidth * 0.5625 + "px",
            width: windowWidth + "px"
            // "margin-bottom": (windowHeight - videoHeight) / 2 + "px",
            // "margin-left": "initial"
          };
        } else {
          videoHeight = windowHeight;
          videoWidth = videoHeight / 0.5625;
          this.fixStyle = {
            height: windowHeight + "px",
            width: windowHeight / 0.5625 + "px"
            // "margin-left": (windowWidth - videoWidth) / 2 + "px",
            // "margin-bottom": "initial"
          };
        }
      };
      window.onresize();
    },
    close() {
      this.loginShow = false;
      this.signInShow = true;
    }
  },
  created() {
    this.$nextTick(() => {
      this._initVedio();
      this._changeVedio();
    });
  },
  computed: {
    vWidth() {
      return this.vedioWidth;
    },
    vHeight() {
      return this.vedioHeight;
    }
  },
  components: {
    Login
  }
};
</script>
<style scoped>
.wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.video-container {
  height: 100vh;
  overflow: hidden;
}
.video-container video {
  z-index: 0;
}

.login {
  z-index: 100;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.login-leave-active {
  transition: all 0.5s linear;
}
.login-leave-to {
  transform: translate3d(-100px, 0, 0);
  opacity: 0;
}
/* .signIn {
  z-index: 100;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.signIn-leave-active,
.signIn-enter-active {
  transition: all 0.5s linear;
}
.signIn-leave-to {
  transform: translate3d(-100px, 0, 0);
  opacity: 0;
}
.signIn-enter {
  transform: translate3d(100px, 0, 0);
  opacity: 0;
} */
</style>
